import React from 'react';
import type { Status } from '@/types';
import styled from 'styled-components';
import { observer } from 'mobx-react-lite';

interface EditPannelProps {
  com: Status | null;
}

const EditPannelContainer = styled.div`
  padding: 30px;
  background-color: var(--bg-color);
`;

const ItemContainer = styled.div`
  margin-bottom: 15px; /* 15px is equivalent to 3rem */
`;

/* 
1、使用了mobx-store中的值，因此组件要用observer包裹，否则组件不会更新，导致子组件不会重新渲染 
2、子组件就不需要在包裹了
*/
const EditPannel: React.FC<EditPannelProps> = observer(({ com }) => {
  console.log('编辑组件渲染', com?.status);
  return (
    <EditPannelContainer>
      {com?.status &&
        Object.entries(com.status).map(([key, item]) => {
          if (item.isShow) {
            const EditCom = item.editCom;
            return (
              <ItemContainer key={item.id}>
                <EditCom configKey={key} {...item} />
              </ItemContainer>
            );
          }
          return null;
        })}
    </EditPannelContainer>
  );
});

export default EditPannel;
